<template>
    <div class="box">
        <el-carousel :interval="4000" type="card" height="300">
            <el-carousel-item 
                style="height: 300px" 
                v-for="(item, index) in images" 
                :key="index"
                :style="{ backgroundImage: 'url(' + item + ')' }">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data() {
        return {
            images: [
                require('../assets/girl.jpg'),
                require('../assets/girl2.jpg'),
                require('../assets/display.jpg'),
                require('../assets/cadian.jpg')
            ]
        };
    }
};
</script>

<style scoped>
.el-carousel__item {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
</style>
